<template>
	<!-- ref属性值给到重置和提交方法中的参数 -->
	<el-form status-icon class="formone" :rules="rules" :model="user" ref='user1'>
		<h3 class="title">登录系统</h3>
		<el-form-item label="账号" prop="username">
			<el-input type="text" v-model="user.username" placeholder="账号名" suffix-icon="el-icon-message">
			</el-input>
		</el-form-item>
		<el-form-item label="密码" prop="password">
			<el-input type="password" v-model="user.password" placeholder="密码" suffix-icon="el-icon-lock"></el-input>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submitForm('user1')">提交</el-button>
			<el-button @click="resetForm('user1')">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		data: function() {
			return {
				user: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入活动名称11',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入活动名称11',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			resetForm(formName) {
				alert(111);
				this.$refs[formName].resetFields();
			},
			submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						//使用axios请求vueLogin请求
						var param = new URLSearchParams();
						param.append('username', this.user.username)
						param.append('password', this.user.password)
						var res = await this.$http.post('vueLogin', param)

						console.log(res.data.code)
						if (res.data.code == 200) {
							this.$message({

								message: '恭喜你，登录成功',
								type: 'success'
							});
							//将登录成功的token
							window.sessionStorage.setItem("token", res.data.token)
							//跳转界面
							this.$router.push('/home')

						} else {
							this.$message.error('用户名或账号不合法');
						}


					} else {
						this.$message.error('用户名或账号不合法');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
	.formone {
		border: #DCDFE6 0.0625rem solid;
		width: 400px;
		height: 300px;
		padding: 50px 50px;
		margin: 100px auto;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 15px
	}

	.title {
		text-align: center;
	}
</style>
